<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边上Tooltip</title>
</head>
<style>
  .edgeTooltip {
    background: 'red';
    border: 1px solid 'blue';
  }
</style>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script>
  G6.registerNode('circleNode', {
    drawShape(cfg, group) {
      const keyShape = group.addShape('circle', {
        attrs: {
          x: 0,
          y: 0,
          r: 30,
          fill: '#87e8de'
        }
      });
      return keyShape;
    }
  }, 'circle');

  const data = {
    nodes: [{
      id: 'node1',
      x: 200,
      y: 200,
      label: '节点1',
      anchorPoints: [ [0, 0.5], [1, 0.5] ]
    }, {
      id: 'node2',
      x: 500,
      y: 450,
      label: '节点2',
      anchorPoints: [ [0, 0.5], [1, 0.5] ]
    }
    ],
    edges: [{
      source: 'node1',
      target: 'node2',
      labelText: '两点之间的连线', // 设置成label会添加默认的label
      shape: 'myEdge'
    }]
  };


  // 注册边
  G6.registerEdge('myEdge', {
      // 设置状态
    setState(name, value, item) {
      const group = item.getContainer();
      const shape = group.get('children')[0]; // 顺序根据 draw 时确定
      if (name === 'active') {
        if (value) {
          shape.attr('stroke', '#333');
        } else {
          shape.attr('stroke', '#bae7ff');
        }
      }
      if (name === 'selected') {
        if (value) {
          shape.attr('lineWidth', 3);
        } else {
          shape.attr('lineWidth', 2);
        }
      }
    }
  }, 'cubic-horizontal');

  const graph = new G6.Graph({
    container: 'mountNode',
    width: 1000,
    height: 600,
    defaultNode: {
      shape: 'circleNode'
    },
    defaultEdge: {
      color: '#bae7ff',
      size: 2
    },
    modes: {
      default: ['click-select', 'drag-canvas',
        {
          type: 'edge-tooltip',
          formatText(model) {
          return `
            <div class='edgeTooltip'>边tooltip:${model.labelText}</div>`
        }
      }],
    }
  });

  graph.data(data);
  graph.render();

  // 点击时选中，再点击时取消
  graph.on('edge:click', ev => {
    const edge = ev.item;
    graph.setItemState(edge, 'selected', !edge.hasState('selected')); // 切换选中
  });

  graph.on('edge:mouseenter', ev => {
    const edge = ev.item;
    graph.setItemState(edge, 'active', true);
  });

  graph.on('edge:mouseleave', ev => {
    const edge = ev.item;
    graph.setItemState(edge, 'active', false);
  });
</script>
</body>
</html>